<template>
  <div>
    <div class="box" style="width: 100%; height: 430px" id="chart"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { interpolate } from "@/api/interpolate";
export default {
  props: {
    type: {
      type: Number,
      default: 1,
    },
    searchForm: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      myChart: null,
      chartData: [],
    };
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById("chart"));
    let resData = [
      {
        "x": 258,
        "y": 158,
        "val": 24.832493483927014
      },
      {
        "x": 1.0038910505836576,
        "y": 0,
        "val": 24.85329522289871
      },
      {
        "x": 2.007782101167315,
        "y": 0,
        "val": 24.874096961870404
      },
      {
        "x": 3.0116731517509727,
        "y": 0,
        "val": 24.894898700842095
      },
      {
        "x": 4.01556420233463,
        "y": 0,
        "val": 24.91570043981379
      },
      {
        "x": 5.019455252918288,
        "y": 0,
        "val": 24.936502178785485
      },
      {
        "x": 6.023346303501945,
        "y": 0,
        "val": 24.95730391775718
      },
      {
        "x": 7.027237354085603,
        "y": 0,
        "val": 24.97810565672887
      },
      {
        "x": 8.03112840466926,
        "y": 0,
        "val": 24.998907395700567
      },
      {
        "x": 9.035019455252918,
        "y": 0,
        "val": 25.01970913467226
      },
      {
        "x": 10.038910505836576,
        "y": 0,
        "val": 25.040510873643957
      },
      {
        "x": 11.042801556420233,
        "y": 0,
        "val": 25.06131261261565
      },
      {
        "x": 70.27237354085602,
        "y": 2.0127388535031847,
        "val": 26.295172788575186
      },
      {
        "x": 71.27626459143968,
        "y": 2.0127388535031847,
        "val": 26.31597452754688
      },
      {
        "x": 72.28015564202335,
        "y": 2.0127388535031847,
        "val": 26.336776266518577
      },
      {
        "x": 73.284046692607,
        "y": 2.0127388535031847,
        "val": 26.35757800549027
      },
      {
        "x": 74.28793774319067,
        "y": 2.0127388535031847,
        "val": 26.378379744461967
      },
      {
        "x": 75.29182879377431,
        "y": 2.0127388535031847,
        "val": 26.399181483433658
      }

    ];

    let chartData = [];
    for (let i = 0; i < resData.length; i++) {
      const element = resData[i];
      let arr = [];
      arr.push(element.x);
      arr.push(element.y);
      arr.push(element.val);
      chartData.push(arr);
    }
    this.setChart(chartData);
    
    window.addEventListener("resize", this.resizeHandler);
    this.$nextTick(() => {
      this.setChart();
    });
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeHandler);
    if (!this.myChart) {
      return;
    }
    this.myChart.dispose();
    this.myChart = null;
  },
  methods: {
    
    resizeHandler() {
      this.myChart.resize();
    },
    setChart(chartData, searchForm) {
      echarts.registerMap("bgImg", {
        svg: `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="258px" height="158px" viewBox="0 0 258 158" enable-background="new 0 0 258 158" xml:space="preserve">  <image id="image0" width="258" height="158" x="0" y="0"
    href="
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
AABJRU5ErkJggg==" />
</svg>

`,
      }); //这里的factoryDrawing必须要和geo里面的map值统一
      let option = {
        tooltip: {
          show: true,
          // trigger: 'axis',
          // axisPointer: {
          //   type: 'shadow'
          // },
          // className: 'bgImg',
          triggerOn: "mousemove", // 只做鼠标悬浮效果
          formatter: function (params) {

            switch (searchForm.type) {
              case 1:
                return `时间：${searchForm.showTimeRange}<br/>
            X：${params.value[0]}<br/>
            Y：${params.value[1]}<br/>
            温度：${params.value[2].toFixed(1)}℃`;
              case 2:
                return `时间：${searchForm.showTimeRange}<br/>
           X：${params.value[0]}<br/>
            Y：${params.value[1]}<br/>
            湿度：${Math.round(params.value[2])}%`;
              case 3:
                return `时间：${searchForm.showTimeRange}<br/>
            X：${params.value[0]}<br/>
            Y：${params.value[1]}<br/>
            PM2.5: ${Math.round(params.value[2])}ug/m³`;
              case 4:
                return `时间：${searchForm.showTimeRange}<br/>
           X：${params.value[0]}<br/>
            Y：${params.value[1]}<br/>
            CO2：${Math.round(params.value[2])}ppm`;
              case 5:
                return `时间：${searchForm.showTimeRange}<br/>
           X：${params.value[0]}<br/>
            Y：${params.value[1]}<br/>
            照度：${Math.round(params.value[2])}lx`;

              default:
                return "";
            }
          },
        },
        //   emphasis: {
        //     itemStyle: {
        //       color: 'transparent',
        //       areaColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //         { offset: 0, color: "rgb(255,120,21,0.3)" },
        //         { offset: 0.5, color: "rgba(255,120,21, 0.49)" },
        //         { offset: 1, color: "rgba(255,120,21, 0.8)" },
        //       ]), // 鼠标悬浮对应的块显示橙色
        //       borderColor: 'rgba(236,106,0, 0.49)',
        //       borderWidth: 2,
        //     },
        //   },
        // xAxis: {max:258,show:false},
        // yAxis: {max:158,show:false},
        geo: {
          name: "bgImg",
          map: "bgImg",
          show: true,
          // roam: true,
          selectedMode: false,
          // regions: data,
          // top:0,
          // bottom:0,
          // left:0,
          // right:40,
          // layoutCenter:["50%","50%"],
        },
        series: [
          {
            type: "heatmap",
            coordinateSystem: "geo",
            data: null,
            markPoint: "none",
          },
          {
            emphasis: {
              // itemStyle: {
              //   color: "rgb(255,255,255)",
              // },
              // focus: "self",
              scale: 3,
            },
            symbol: "rect",
            // colorBy: "series",
            coordinateSystem: "geo",
            symbolSize: 5,
            data: chartData,
            cursor:"crosshair",
            itemStyle: {
              color: function (params) {
                if (params.value[2] > 29.5&&params.value[2]<30) {
                  return "rgba(255,255,255,1)";
                } else {
                  return "rgba(255,255,255,0)";
                }
              },
            },
            type: "scatter",
          },
        ],
        visualMap: {
          type: "continuous",
          min: 0,
          max: 1,
          orient: "vertical",
          right: "0%",
          bottom: "middle",
          animation: false,
          itemHeight: "340",
          seriesIndex: 0,
          //自定义热力图颜色
          target: {
            inRange: {
              color: ["rgba(255,255,255,1)"],
              symbolSize: [10, 10],
            },
          },
          controller: {
            inRange: {
              color: [
                "#7E00FF",
                "#3270F8",
                "#37E8D7",
                "#7AFEB8",
                "#FFA959",
                "#FF803F",
                "rgba(255,0,0)",
                "rgba(255,0,0)",
              ],
            },
          },
          // inRange:{
          //   symbol:'none',
          //   symbolSize:'0',
          //     color: ['rgba(0,255,255)','rgba(255,255,0)', 'rgba(255,0,0)'],
          //     colorAlpha:1
          // },
          outOfRange: {
            color: ["rgba(255,255,255,0)"],
          },
        },
      };

      this.myChart.setOption(option);
    },
  },
};
</script>
<style lang="scss" scoped>
// .box{
// border: 2px solid rgb(175, 168, 168);
// }
</style>
